<template>
  <div class="app">
    <div class="title">
      任务派遣管理
    </div>
    <a-row>
      <a-col :span="8">
        <a-input placeholder="工作名称"/>
      </a-col>
      <a-col :span="8">
        <a-input placeholder="文号"/>
      </a-col>
      <a-col :span="8">
        <a-input placeholder="发文单位"/>
      </a-col>
      <a-col :span="8">
        <a-select placeholder="请选择">
          <a-select-option value="1">
            1
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="8">
        <a-button type="primary">
          搜索
        </a-button>&emsp;&nbsp;
        <a-button>重置</a-button>
      </a-col>
    </a-row>
    <a-row>
      <a-tabs>
        <a-tab-pane tab="待办工作" key="1">
          <a-table :columns="columns" :data-source="data" :scroll="{ x: 2000 }">
                        <span slot="action" slot-scope="text, record">
                            <a @click="handleClick(record)">办理</a>&nbsp;
                            <a>查看</a>&nbsp;
                            <a>编辑</a>&nbsp;
                            <a>删除</a>
                        </span>
          </a-table>
        </a-tab-pane>
        <a-tab-pane tab="办结工作" key="2">
          <a-table :columns="columns" :data-source="data" :scroll="{ x: 2000 }">
                        <span slot="action" slot-scope="text, record">
                            <a @click="handleClick1(record)">查看</a>&nbsp;
                            <a>编辑</a>&nbsp;
                            <a>删除</a>
                        </span>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-row>
    <a-modal title="办理" :visible="dialogVisible" width="40%" ok-text="确认" cancel-text="取消"
             @cancel="dialogVisible = false" @ok="dialogVisible = false">
      <a-row style="padding: 15px;">
        <a-col :span="12">
          工作名称：
          <a-input v-model="data.name" placeholder="工作名称"/>
        </a-col>
        <a-col :span="12">
          文号：&emsp;&emsp;<a-input v-model="data.id" placeholder="文号"/>
        </a-col>
        <a-col :span="12">
          工作类型：
          <a-input v-model="data.lx" placeholder="工作类型"/>
        </a-col>
        <a-col :span="12">
          发文单位：
          <a-input v-model="data.dw" placeholder="发文单位"/>
        </a-col>
        <a-col :span="12">
          联系人：&emsp;<a-input v-model="data.lxr" placeholder="联系人"/>
        </a-col>
        <a-col :span="12">
          联系电话：
          <a-input v-model="data.dh" placeholder="联系电话"/>
        </a-col>
        <a-col :span="12">
          派发时间：
          <a-input v-model="data.startTime" placeholder="派发时间"/>
        </a-col>
        <a-col :span="12">
          截止时间：
          <a-input v-model="data.endTime" placeholder="截止时间"/>
        </a-col>
        <a-col :span="24">派发意见</a-col>
        <a-col :span="24">
          <a-input type="textarea" :rows="4" placeholder="请输入内容" v-model="textarea">
          </a-input>
        </a-col>
        <a-col :span="24">工作附件（图片、文档等）</a-col>
        <a-col :span="24">
          <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :before-upload="beforeUpload"
                    @change="handleChange">
            <img v-if="imageUrl" :src="imageUrl" alt="avatar"/>
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'"/>
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
        </a-col>
        <a-col :span="24">工作反馈表单</a-col>
        <a-col :span="24">
          <a-input type="textarea" :rows="4" placeholder="请输入内容" v-model="textarea">
          </a-input>
        </a-col>
        <a-col :span="24">报送文件</a-col>
        <a-col :span="24">
          <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :before-upload="beforeUpload"
                    @change="handleChange">
            <img v-if="imageUrl" :src="imageUrl" alt="avatar"/>
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'"/>
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
        </a-col>
      </a-row>
    </a-modal>
    <a-modal title="查看" :visible="dialogVisible1" width="40%" ok-text="确认" cancel-text="取消"
             @cancel="dialogVisible1 = false" @ok="dialogVisible1 = false">
      <a-row style="padding: 15px;">
        <a-col :span="12">
          工作名称：
          <a-input v-model="data.name" disabled placeholder="工作名称"/>
        </a-col>
        <a-col :span="12">
          文号：&emsp;&emsp;<a-input v-model="data.id" disabled placeholder="文号"/>
        </a-col>
        <a-col :span="12">
          工作类型：
          <a-input v-model="data.lx" disabled placeholder="工作类型"/>
        </a-col>
        <a-col :span="12">
          发文单位：
          <a-input v-model="data.dw" disabled placeholder="发文单位"/>
        </a-col>
        <a-col :span="12">
          联系人：&emsp;<a-input v-model="data.lxr" disabled placeholder="联系人"/>
        </a-col>
        <a-col :span="12">
          联系电话：
          <a-input v-model="data.dh" disabled placeholder="联系电话"/>
        </a-col>
        <a-col :span="12">
          派发时间：
          <a-input v-model="data.startTime" disabled placeholder="派发时间"/>
        </a-col>
        <a-col :span="12">
          截止时间：
          <a-input v-model="data.endTime" disabled placeholder="截止时间"/>
        </a-col>
        <a-col :span="24">派发意见</a-col>
        <a-col :span="24">
          <a-input type="textarea" :rows="4" placeholder="请输入内容" disabled v-model="textarea">
          </a-input>
        </a-col>
        <a-col :span="24">工作附件（图片、文档等）</a-col>
        <a-col :span="24">
          <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :before-upload="beforeUpload"
                    @change="handleChange">
            <img v-if="imageUrl" :src="imageUrl" alt="avatar"/>
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'"/>
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
        </a-col>
        <a-col :span="24">工作反馈表单</a-col>
        <a-col :span="24">
          <a-input type="textarea" :rows="4" placeholder="请输入内容" v-model="textarea">
          </a-input>
        </a-col>
        <a-col :span="24">报送文件</a-col>
        <a-col :span="24">
          <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :before-upload="beforeUpload"
                    @change="handleChange">
            <img v-if="imageUrl" :src="imageUrl" alt="avatar"/>
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'"/>
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '工作名称',
    dataIndex: 'name',
    key: 'name',
    width: 180
  },
  {
    title: '文号',
    dataIndex: 'id',
    key: 'id',
    width: 180
  },
  {
    title: '工作类型',
    dataIndex: 'lx',
    key: 'lx',
    width: 180
  },
  {
    title: '发文单位',
    dataIndex: 'dw',
    key: 'dw',
    width: 180
  },
  {
    title: '联系人',
    dataIndex: 'lxr',
    key: 'lxr',
    width: 180
  },
  {
    title: '派发时间',
    dataIndex: 'startTime',
    key: 'startTime',
    width: 200
  },
  {
    title: '反馈截止日期',
    dataIndex: 'endTime',
    key: 'endTime',
    width: 200
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: {customRender: 'action'},
  },
]
const data = [
  {
    name: '工作任务1',
    id: '202310221020',
    lx: '工作类型1',
    dw: '单位1',
    lxr: '联系人1',
    startTime: '24.11.03 10:20',
    endTime: '24.11.03 10:21',
  },
  {
    name: '工作任务2',
    id: '202310221020',
    lx: '工作类型2',
    dw: '单位2',
    lxr: '联系人2',
    startTime: '24.11.03 10:20',
    endTime: '24.11.03 10:21',
  }
]
export default {
  data() {
    return {
      activeName: 'first',
      dialogVisible: false,
      dialogVisible1: false,
      dialogImageUrl: '',
      dialogVisibleimg: false,
      disabled: false,
      data: '',
      input: '',
      value: '',
      textarea: '内容内容内容内容内容内容',
      columns,
      data,
    }
  },
  methods: {
    beforeUpload() {
    },
    handleClick(row) {
      this.data = row
      this.dialogVisible = true
    },
    handleClick1(row) {
      this.data = row
      this.dialogVisible1 = true
    },
    handleRemove(file) {
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
    }
  },
}
</script>
<style scoped>

.ant-row {
  border-radius: 5px;
  margin-bottom: 15px;
  background: #fff;
  padding: 20px;
  color: #000;
}

/deep/ .ant-table-thead > tr > th {
  color: #000;
  font-weight: bold;
}

/deep/ .ant-table-tbody > tr > td {
  color: #000;
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}


/deep/ .el-table thead {
  color: black;
  font-weight: bold;
  background: #FAFAFA;
}

/deep/ .el-table th.el-table__cell {
  background: #FAFAFA;
}

@media screen and (max-width: 1750px) {
  .el-input {
    width: 60%;
  }

  .el-select {
    width: 60%;
  }
}

@media screen and (max-width: 1300px) {
  .el-input {
    width: 70%;
  }

  .el-select {
    width: 70%;
  }

  .app {
    width: calc(100% - 50px);
  }
}

@media screen and (max-width: 1100px) {
  .el-input {
    width: 90%;
  }

  .el-select {
    width: 90%;
  }
}
</style>